<!-- 关于我 -->
<template>
  <div id="aboutMe">
    <!-- 关于 -->
    <div class="about public">
      <div class="title">About Me</div>
      <!-- <div class="des">{{ props.userInfo.des }}</div> -->
      <div
        class="des"
        :style="{
          color: bgcColor.color === '#000' ? '#000' : '#fff'
        }"
      >
        {{ props.userInfo.des }}
      </div>
    </div>
    <!-- 详细信息 -->
    <div class="information public">
      <div class="title">Personal Information</div>
      <div class="des">
        <div class="list">
          <div
            class="name"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Name
          </div>
          <span
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
            >{{ props.userInfo.name }}</span
          >
        </div>
        <div class="list">
          <div
            class="name"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Occupation
          </div>
          <span
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
            >{{ props.userInfo.occupation }}</span
          >
        </div>
        <div class="list">
          <div
            class="name"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Email
          </div>
          <span
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
            >{{ props.userInfo.email }}</span
          >
        </div>
        <div class="list">
          <div
            class="name"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            Phone
          </div>
          <template v-if="props.userInfo.phone">
            <span
              :style="{
                color: bgcColor.color === '#000' ? '#393939' : '#fff'
              }"
              >{{ props.userInfo.phone }}</span
            >
          </template>
          <template v-else>
            <span
              :style="{
                color: bgcColor.color === '#000' ? '#393939' : '#fff'
              }"
              >暂未填写</span
            >
          </template>
        </div>
        <div class="list">
          <div
            class="name"
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
          >
            JoinTime
          </div>
          <span
            :style="{
              color: bgcColor.color === '#000' ? '#393939' : '#fff'
            }"
            >{{ props.userInfo.time }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue'
import { useStore } from 'vuex'
import type { UserInfoVuexTypes } from '@/server/serve/api_admintor'

const store = useStore()

interface PropsTypes {
  userInfo: UserInfoVuexTypes
}

const bgcColor = computed(() => store.state.Background)

const props = defineProps<PropsTypes>()
</script>

<style scoped lang="less">
#aboutMe {
  animation: fadeInUp;
  // 动画持续时间
  animation-duration: 0.5s;
  .public {
    margin-top: 20px;
    &:nth-child(1) {
      margin-top: 0;
    }
    .title {
      color: #f93a08;
      margin: 8px 0;
      font-weight: 600;
      font-size: 17px;
    }
    .des {
      margin-top: 10px;
      font-size: 12.25px;
      color: #393939;
      line-height: 2;
    }
  }
  .information {
    .des {
      .list {
        display: flex;
        margin-top: 6px;
        .name {
          width: 170px;
          font-size: 14px;
          color: #000;
          font-weight: 600;
        }
        span {
          color: #393939;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
